<template>
  <border
    class="park-environmental-index"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content" slot="module-content">
      <div class="content-li">
        <div class="content-li-img">
          <img src="./../../assets/images/module/icon_humidity.png" alt="">
        </div>
        <div class="content-li-message">
          <div class="message-number">{{environmental.humidity}}<span>RH</span></div>
          <div class="message-title">湿度</div>
        </div>
      </div>
      <div class="content-li">
        <div class="content-li-img">
          <img src="./../../assets/images/module/icon_tem.png" alt="">
        </div>
        <div class="content-li-message move-li">
          <div class="message-number">{{environmental.temperature}}<span>°C</span></div>
          <div class="message-title">温度</div>
          <span class="point-span">
            <i class="point"></i>
          </span>
        </div>
      </div>
      <div class="content-li">
        <div class="content-li-img">
          <img src="./../../assets/images/module/icon_pm2.5.png" alt="">
        </div>
        <div class="content-li-message">
          <div class="message-number">{{environmental.pm25}}<span>UG/M³</span></div>
          <div class="message-title">PM2.5浓度</div>
        </div>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
export default {
  name: 'parkEnvironmentalIndex',
  components: {
    Border
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '园区环境指数',
        goPageUrl: ''
      },
      environmental: {
        pm25: '',
        humidity: '',
        temperature: ''
      },
      refreshInterval: 0
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    // 获取数据
    getData (type, refreshInterval) {
      if (type === 'init') {
        this.parkApi.temperature({
          ProjectCode: 1169613384,
          DeviceID: 1
        }).then(res => {
          let resData = res.data
          if (resData.state === 0) {
            let environmental = {}
            resData.data.forEach(item => {
              if (item.DataCode === '31') {
                environmental.temperature = item.CollectData
              }
              if (item.DataCode === '32') {
                environmental.humidity = item.CollectData + '%'
              }
              if (item.DataCode === '126') {
                environmental.pm25 = item.CollectData
              }
            })
            this.environmental = environmental
          } else {
            this.showTips('请求失败，点击确认继续刷新')
            this.environmental = {
              pm25: '',
              humidity: '',
              temperature: ''
            }
          }
          this.flag = true
        }, res => {
          this.showTips('请求失败，点击确认继续刷新')
          this.environmental = {
            pm25: '',
            humidity: '',
            temperature: ''
          }
          this.flag = true
        })
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      }
    },
    // 每隔10s请求一次数据
    automaticRedrawing () {
      clearInterval(window.parkEnvironmentalIndexTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.parkEnvironmentalIndexTimer = setInterval(() => {
          this.getData('init')
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroy () {
    clearInterval(window.parkEnvironmentalIndexTimer)
  }
}
</script>
<style lang="scss" scoped>
.park-environmental-index {
  .module-content {
    width: 100%;
    height: 100%;
    .content-li {
      width: calc(100% / 3);
      height: 100%;
      float: left;
      .content-li-img {
        height: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 33px;
        }
      }
      .content-li-message {
        width: 130px;
        height: 130px;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-wrap: wrap;
        &.move-li {
          position: relative;
          border: 1px dashed #3164EE;
          border-radius: 100%;
          z-index: 1;
          .point-span {
            position: absolute;
            top: -5px;
            left: 50%;
            width: 10px;
            height: calc(50% + 5px);
            transform-origin: 50% 100%;
            transform: translate(-50%, 0) rotate(0deg);
            z-index: 0;
            animation: move-point 4s ease-in-out infinite;
          }
          .point {
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background: #3164EE;
          }
        }
        .message-number {
          color: #fff;
          font-family: 'time-font';
          width: 100%;
          font-size: 22px;
          span {
            font-size: 18px;
          }
        }
        .message-title {
          width: 100%;
          color: #A1CFFF;
          font-size: 16px;
        }
      }
    }
  }
}
@keyframes move-point {
  0% {
    transform: translate(-50%, 0) rotate(0deg);
  }
  100% {
    transform: translate(-50%, 0) rotate(360deg);
  }
}
@media screen and (min-width: 1890px) {
  .park-environmental-index {
    .module-content {
      .content-li {
        .content-li-message {
          width: 150px;
          height: 150px;
        }
      }
    }
  }
}
</style>
